<template>
	<!-- 设备列表 -->
	<div class="content">
		<div class="content-top">
			车牌识别摄像头_设备详情
		</div>
        <div class="car-title">
			<div class="car-title-left">基本信息</div>
            <div class="car-title-right"><i class="el-icon-edit"></i>修改</div>
		</div>
				<div class="car-detail">
			<el-row>
				<el-col :span="8">设备名称：{{detail.name}}</el-col>
				<el-col :span="8">设备编号：{{detail.code}}</el-col>
				<el-col :span="8">型号：{{detail.model}}</el-col>
			</el-row>
            <el-row>
				<el-col :span="8">所属站点：{{detail.stationName}}</el-col>
				<el-col :span="8">所在工位：{{detail.stationWorkName}}</el-col>
                <el-col :span="8">状态：{{detail.status == null ? '未知' : textConversion(detail.status)}}</el-col>
			</el-row>
            <el-row>
				<el-col :span="8">ip地址：{{detail.ipAddress == null ? '未知' : detail.ipAddress}}</el-col>
				<el-col :span="16">备注：{{detail.note == null ? '无' : detail.note}}</el-col>
			</el-row>
		</div>
        <div class="car-title">
			<div class="car-title-left">拍照记录</div>
		</div>
        <div class="car-table-page">
        <div class="car-detail-table">
			<el-table :data="cameraPicList" show-header stripe style="width: 100%;">
				<el-table-column align="center" label="时间">
					<template slot-scope="scope">{{scope.row.recordDate}}</template>
				</el-table-column>
				<el-table-column align="center" label="牌照">
					<template slot-scope="scope">{{scope.row.licensePlateNumber}}</template>
				</el-table-column>
				<el-table-column align="center" label="牌照类型">
					<template slot-scope="scope">{{scope.row.plateType_dictText}}</template>
				</el-table-column>
			</el-table>
		</div>
            <div class="content-page">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page"
				:page-size=limit layout="prev, pager, next, jumper" :total=total>
				</el-pagination>
			</div>
		</div>
        <div class="car-title center-button">
			<center>
				<el-button type="primary" @click="onBack"><i class="el-icon-back"></i>返回</el-button>
			</center>
		</div>
	</div>
</template>

<script>
	import Global from '@/components/Global.vue'
	export default {
		props:['id'],
		data() {
			return {
                page:1,
                limit: 5,
				total: 1,
				detail:'',
				cameraPicList:[],
				statusList:[
					{
						id:0,
						name:'正常'
					},
					{
						id:1,
						name:'异常'
					},
					{
						id:2,
						name:'离线'
					}
				]
			}
		},
		mounted() {
			this.get_list()
			this.get_info()
		},
		methods: {
			textConversion(idx){
				for(let item of this.statusList){
					if(item.id == idx){
                      return item.name
					}
				}
			},
            onBack(){
                this.$emit('isDetail')
            },
            handleSizeChange(val) {
			},
			handleCurrentChange(val) {
				this.page = val;
				this.get_list();
			},
			get_info() {
				var self = this;
				this.$axios.get(this.$global.serverIp + 'station/equipmentCamera/detail/'+this.id)
					.then(function(res) {
						if (res != '') {
							self.detail = res.data;
						}
				
					})
			},
			get_list(){
				var self = this;
				this.$axios.post(this.$global.serverIp + 'station/equipmentCameraRecord/findPage',{
					"limit":self.limit,
					"page":self.page,
					"equipmentId":self.id
				})
					.then(function(res) {
						if (res != '') {
						  self.cameraPicList = res.data.list;
						  self.total = res.data.totalCount;
						  self.page = res.data.currPage;
						}
				
					})
			},
        }

	}
	import '@/assets/css/common.css'
</script>
<style>
	.car-title {
		margin: 26px 0px 0px 30px;
		overflow: hidden;
		font-size: 16px;
        width: 1088px;
	}
	
	.car-title-left {
		float: left;
		color: #606B82;
		margin-bottom: 16px;
	}
	
	.car-title-right {
		float: right;
		color: #FD943F;
		margin-bottom: 10px;
	}
	
	.car-title-right:hover {
		cursor: pointer;
		opacity: 0.3;
	}
	
	.car-detail {
		width: 1088px;
		height: 300px;
		background-color: #F2F6FA;
		border: 1px solid #C9CDD1;
		padding-left: 30px;
		box-sizing: border-box;
		margin-left: 30px;
		padding-top: 40px;
	}
	.car-detail-table{
		width: 1088px;
		height: 300px;
		overflow: auto;
		background-color: #F2F6FA;
		border: 1px solid #C9CDD1;
		margin-left: 30px;
	}
	.car-table-page{
		width: 1088px;
		height: 300px;
	}
	.car-detail .el-row {
		margin-bottom: 30px;
		font-size: 14px;
		color: #2D384C;
	}
	.application-reason{
		display: flex;
		align-items: flex-start;
	}
	.center-button{
		padding-bottom: 30px;
	}
</style>


